<style>
  .config-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
  }
</style>
<template>
  <div>
    <Drawer
      :value="modalState"
      :closable="false"
      @on-close="cancel"
      :title="title"
      width="40%">
      <Form
        ref="parameterConfigDrawer"
        :model="row"
        style="margin-left: 50px; margin-top: 20px;"
        :label-width="150">
        <div v-if="row.key === 'launchImg'" style="font-size: 16px; margin-bottom: 20px;">app启动图片配置</div>
        <FormItem v-if="row.key === 'launchImg'" prop="value" label="app启动图片：" style="width: 300px; margin-left: 35px;">
          <upload-app-img @upload-success="handleUpload" :folder="folder" :row="row"></upload-app-img>
        </FormItem>
        <div v-if="row.key === 'freezeDay'" style="font-size: 16px; margin-bottom: 20px;">佣金冻结天数配置</div>
        <FormItem v-if="row.key === 'freezeDay'" prop="value" label="冻结天数：" style="width: 300px; margin-left: 35px;">
          <Input v-model="row.value" type="text" placeholder="请输入佣金冻结天数" />
        </FormItem>
        <div v-if="row.key === 'launchUrl'" style="font-size: 16px; margin-bottom: 20px;">app启动图片跳转链接配置</div>
        <FormItem v-if="row.key === 'launchUrl'" prop="value" label="app启动图片跳转链接：" style="width: 300px; margin-left: 35px;">
          <Input v-model="row.value" type="text" placeholder="请输入app启动图片跳转链接" />
        </FormItem>
        <div v-if="row.key === 'alter'" style="font-size: 16px; margin-bottom: 20px;">佣金余额预警配置</div>
        <FormItem v-if="row.key === 'alter'" prop="value" label="佣金余额低于：" style="width: 300px; margin-left: 35px;">
          <Input v-model="row.value" type="text" placeholder="请输入预警佣金余额" />
        </FormItem>
        <div v-if="row.key === 'cashMin'" style="font-size: 16px; margin-bottom: 20px;">佣金提现最低金额</div>
        <FormItem v-if="row.key === 'cashMin'" prop="value" label="佣金提现最低金额：" style="width: 300px; margin-left: 35px;">
          <Input v-model="row.value" type="text" placeholder="请输入佣金提现最低金额" />
        </FormItem>
        <div v-if="row.key === 'm_smsService'" style="font-size: 16px; margin-bottom: 20px;">短信服务费</div>
        <FormItem v-if="row.key === 'm_smsService'" prop="value" label="短信服务费：" style="width: 300px; margin-left: 10px;">
          <Input v-model="row.value" type="text" placeholder="请输入短信服务费" />
        </FormItem>
        <div v-if="row.key === 'm_commissionRate'" style="font-size: 16px; margin-bottom: 20px;">佣金手续费,比例</div>
        <FormItem v-if="row.key === 'm_commissionRate'" prop="value" label="佣金手续费,比例：" style="width: 300px; margin-left: 10px;">
          <Input v-model="row.value" type="text" placeholder="请输入佣金手续费" />
        </FormItem>
        <div v-if="row.key === 'staticUri'" style="font-size: 16px; margin-bottom: 20px;">静态文件地址</div>
        <FormItem v-if="row.key === 'staticUri'" prop="value" label="静态文件地址：" style="width: 330px; margin-left: 10px;">
          <Input v-model="row.value" type="text" placeholder="请输入静态文件地址" />
        </FormItem>
      </Form>
      <div class="config-drawer-footer">
        <Button style="margin-right: 8px" type="primary" @click="handleSubmit">保存</Button>
        <Button @click="cancel">取消</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
import UploadAppImg from '_c/upload-app-img'
export default {
  name: 'ParameterConfigDrawer',
  components: {
    UploadAppImg
  },
  data () {
    return {
      title: '',
      loading: true,
      folder: 'app',
      value: null,
      form: {
        freeze: '',
        commissionalert: ''
      }
      // rules: {
      //   value: [
      //     {
      //       required: true,
      //       message: '冻结天数不能为空',
      //       trigger: 'blur'
      //     }
      //   ]
      // }
    }
  },
  updated () {
    this.title = '数据配置'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      configList: state => state.parameterConfig.configList,
      row: state => state.parameterConfig.row,
      modalState: state => state.modal.customerDrawerState
    })
  },
  methods: {
    ...mapActions(['updateCustomerDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('config-valid', {
        id: this.row.id,
        value: this.row.value
      })
    },
    cancel () {
      this.updateCustomerDrawerState(false)
      this.$refs['parameterConfigDrawer'].resetFields()
    },
    handleUpload (url) {
      this.row.value = url
    }
  }
}
</script>
